<template>
    <input ref="inputRef" :value="nativeInputValue" :type="type" :disabled="disabled" :placeholder="placeholder"
        :focus="focus" :maxlength="maxlength" @input="onInput" @focus="onFocus" @blur="onBlur" @confirm="onConfirm" />
</template>
<script lang="ts" setup>
import { definePropType } from '../../utils/runtime';
// import { Input as InputType } from '@tarojs/components';
import { computed, ref } from 'vue';
const props = defineProps({
    modelValue: {
        type: definePropType<string | number | null | undefined>([
            String,
            Number,
            Object,
        ]),
        default: '',
    },
    type: {
        type: String,
        default: 'text',
    },
    placeholder: String,
    maxlength: Number,
    focus: Boolean,
    disabled: {
        type: Boolean,
        default: false
    },
})

const emits = defineEmits(['update:modelValue', 'input', 'focus', 'blur', 'confirm'])
const inputRef = ref<any>()
const nativeInputValue = computed(() => String(props.modelValue ?? ''))

const onInput = (event: any) => {
    const input = event.target as HTMLInputElement;
    let value = input.value;
    emits('update:modelValue', value);
    emits('input', event);
}

const onFocus = (event: any) => {
    emits('focus', event);
}
const onBlur = (event: any) => {
    if (props.disabled) return;
    emits('blur', event);
};
const onConfirm = (event: any) => {
    emits('confirm', event);
}
</script>